<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>产品列表页</title>
		<link rel="icon" href="./img/favicon.ico">
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
	</head>

	<body>
		<div id="app">
			<!-- 头部栏位 -->
			<!--页面顶部-->
			<div id="nav-bottom">
				<!--顶部-->
				<div class="nav-top">
					<div class="top">
						<div class="py-container">
							<div class="shortcut">
								<ul class="fl">
									<li class="f-item">shop欢迎您！</li>
									<li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a
												href="register.html" target="_blank">免费注册</a></span></li>
								</ul>
								<div class="fr typelist">
									<ul class="types">
										<li class="f-item"><a href="order.html" >我的订单</a></li>

										<li class="f-item"><span><a href="cart.html" >我的购物车</a></span>
										</li>
										<li class="f-item"><span><a href="home.html" target="_blank">我的shop</a></span>
										</li>
										<li class="f-item"><span>shop会员</span></li>
										<li class="f-item"><span>企业采购</span></li>
										<li class="f-item"><span>关注shop</span></li>
										<li class="f-item"><span><a href="cooperation.html"
													target="_blank">合作招商</a></span></li>
										<li class="f-item"><span><a href="shoplogin.html"
													target="_blank">商家后台</a></span></li>
										<li class="f-item"><span>网站导航</li>
									</ul>
								</div>

							</div>
						</div>
					</div>

					<!--头部-->
					<div class="header">
						<div class="py-container">
							<div class="yui3-g">
								<div class="yui3-u Left logoArea">
									<a class="logo-bd" title="shop" href="index.html" target="_blank"></a>
								</div>
								<div class="yui3-u Rit searchArea">
									<div class="search">
										<form action="" class="sui-form form-inline">
											<!--searchAutoComplete-->
											<div class="input-append">
												<input v-model="product.skuName" type="text" id="autocomplete"
													class="input-error input-xxlarge" />
												<button class="sui-btn btn-xlarge btn-danger" type="button"
													@click="search">搜索</button>
											</div>
										</form>
									</div>
								</div>

							</div>

						</div>
					</div>
				</div>
			</div>

			<!-- 商品分类导航 -->
			<div class="typeNav">
				<div class="py-container">
					<div class="yui3-g NavList">
						<div class="all-sorts-list">
							<div :class="active==0?'yui3-u Left all-sort':'yui3-u Left'">
								<h4 style="text-align: center;cursor: pointer;" @click="cleanAll()">全部商品分类</h4>
							</div>
						</div>

						<div class="yui3-u navArea">
							<ul class="nav">
								<li :class="active==one.id?'f-item all-sort':'f-item'" v-for="(one,i) in categoryList">
									<a href="javaScript:void(0)"
										@click="getTwo(one.id,one.categoryList)">{{one.name}}</a>
								</li>
							</ul>
						</div>
						<div class="yui3-u Right"></div>
					</div>
				</div>
			</div>
			<!--list-content-->
			<div class="main">
				<div class="py-container">
					<div class="clearfix selector">
						<div class="type-wrap">
							<div class="fl key">
								<ul class="sui-nav">
									<li :class="twoActive==two.id?'selected':''" v-for="(two,i) in twoCategoryList">
										<a href="javaScript:void(0)" @click="getThree(two.id,two.categoryList)">{{two.name}}</a>
									</li>
								</ul>
							</div>
							<div class="fr value">
								<div class="fl ">
									<ul class="sui-nav">
										<li :class="threeActive==three.id?'selected':''" v-for="(three,i) in threeCategoryList">
											<a href="javaScript:void(0)" @click="getSkuInfoByCategory(three.id)">{{three.name}}</a>
										</li>
									</ul>
								</div>
								<div class="clear"></div>
								<div class="logos">
									<ul class="logo-list">
										<li :class="brandActive==item.id?'active':''" v-for="item in brandList">
											<a href="javaScript:void(0)" @click="getSkuInfoByBrand(item.id)"><img :src="item.logo" /></a></li>
									</ul>
								</div>
							</div>
							
						</div>
						
					</div>
					<!--details-->
					<div class="details">
						<div class="sui-navbar">
							<div class="navbar-inner filter">
								<ul class="sui-nav">
									<li class="active">
										<a href="#">综合</a>
									</li>
									<li>
										<a href="#">销量</a>
									</li>
									<li>
										<a href="#">新品</a>
									</li>
									<li>
										<a href="#">评价</a>
									</li>
									<li>
										<a href="#">价格</a>
									</li>
								</ul>
							</div>

							<div class="goods-list">
								<ul class="yui3-g">
									<li class="yui3-u-1-5" v-for="item in goodsList">
										<div class="list-wrap">
											<div class="p-img">
												<a href="item.html" target="_blank">
													<img :src="item.skuDefaultImg" /></a>
											</div>
											<div class="price">
												<strong>
													<em>¥</em>
													<i>{{item.price}}</i>
												</strong>
											</div>
											<div class="attr">
												<a target="_blank" href="item.html">{{item.skuName}}</a>
											</div>
											<div class="commit">
												<i class="command">已有<span>5435</span>人评价</i>
											</div>
											<div class="operate">
												<a href="javascript:void(0);"
												    @click="addCart(item)"
													class="sui-btn btn-bordered btn-danger">加入购物车</a>
												<a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
											</div>
										</div>
									</li>


								</ul>
							</div>
							<div class="fr page">
								<div class="sui-pagination pagination-large">
									<ul>
										<li :class="pagination.current == 1 ? 'prev disabled':'prev'">
											<a href="javaScript:void(0)"
												@click="handlePage((pagination.current - 1))">«上一页</a>
										</li>
										<li :class="pagination.current == (i + 1) ? 'active disabled' : ''"
											v-for="(e,i) in pagination.pages">
											<a href="javaScript:void(0)" @click="handlePage(i + 1)">{{(i + 1)}}</a>
										</li>
										<li :class="pagination.current == pagination.pages ? 'next disabled':'next'">
											<a href="javaScript:void(0)"
												@click="handlePage((pagination.current + 1))">下一页»</a>
										</li>
									</ul>
									<div><span>共{{pagination.pages}}页&nbsp;</span><span>
											到第
											<input type="text" class="page-num">
											页 </span></div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<!-- 底部栏位 -->
				<!--页面底部-->
				<div class="clearfix footer">
					<div class="py-container">
						<div class="footlink">
							<div class="Mod-service">
								<ul class="Mod-Service-list">
									<li class="grid-service-item intro  intro1">

										<i class="serivce-item fl"></i>
										<div class="service-text">
											<h4>正品保障</h4>
											<p>正品保障，提供发票</p>
										</div>

									</li>
									<li class="grid-service-item  intro intro2">

										<i class="serivce-item fl"></i>
										<div class="service-text">
											<h4>正品保障</h4>
											<p>正品保障，提供发票</p>
										</div>

									</li>
									<li class="grid-service-item intro  intro3">

										<i class="serivce-item fl"></i>
										<div class="service-text">
											<h4>正品保障</h4>
											<p>正品保障，提供发票</p>
										</div>

									</li>
									<li class="grid-service-item  intro intro4">

										<i class="serivce-item fl"></i>
										<div class="service-text">
											<h4>正品保障</h4>
											<p>正品保障，提供发票</p>
										</div>

									</li>
									<li class="grid-service-item intro intro5">

										<i class="serivce-item fl"></i>
										<div class="service-text">
											<h4>正品保障</h4>
											<p>正品保障，提供发票</p>
										</div>

									</li>
								</ul>
							</div>
							<div class="clearfix Mod-list">
								<div class="yui3-g">
									<div class="yui3-u-1-6">
										<h4>购物指南</h4>
										<ul class="unstyled">
											<li>购物流程</li>
											<li>会员介绍</li>
											<li>生活旅行/团购</li>
											<li>常见问题</li>
											<li>购物指南</li>
										</ul>

									</div>
									<div class="yui3-u-1-6">
										<h4>配送方式</h4>
										<ul class="unstyled">
											<li>上门自提</li>
											<li>211限时达</li>
											<li>配送服务查询</li>
											<li>配送费收取标准</li>
											<li>海外配送</li>
										</ul>
									</div>
									<div class="yui3-u-1-6">
										<h4>支付方式</h4>
										<ul class="unstyled">
											<li>货到付款</li>
											<li>在线支付</li>
											<li>分期付款</li>
											<li>邮局汇款</li>
											<li>公司转账</li>
										</ul>
									</div>
									<div class="yui3-u-1-6">
										<h4>售后服务</h4>
										<ul class="unstyled">
											<li>售后政策</li>
											<li>价格保护</li>
											<li>退款说明</li>
											<li>返修/退换货</li>
											<li>取消订单</li>
										</ul>
									</div>
									<div class="yui3-u-1-6">
										<h4>特色服务</h4>
										<ul class="unstyled">
											<li>夺宝岛</li>
											<li>DIY装机</li>
											<li>延保服务</li>
											<li>购物卡</li>
											<li>会员充值卡</li>
										</ul>
									</div>
									<div class="yui3-u-1-6">
										<h4>帮助中心</h4>
										<ul class="unstyled">
											<li>DIY装机</li>
											<li>购物卡</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="Mod-copyright">
								<ul class="helpLink">
									<li>关于我们<span class="space"></span></li>
									<li>联系我们<span class="space"></span></li>
									<li>关于我们<span class="space"></span></li>
									<li>商家入驻<span class="space"></span></li>
									<li>营销中心<span class="space"></span></li>
									<li>友情链接<span class="space"></span></li>
									<li>关于我们<span class="space"></span></li>
									<li>营销中心<span class="space"></span></li>
									<li>友情链接<span class="space"></span></li>
									<li>关于我们</li>
								</ul>
								<p>Copyright©2025-2030 All Rights Reserved.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>
<script src="js/vue3.js"></script>
<script src="js/axios.js"></script>
<script src="js/request.js"></script>
<script src="js/common.js"></script>
<script>
	const {
		createApp
	} = Vue.createApp({

		data() {
			return {
				active: 0,
				twoActive :0,
				threeActive:0,
				brandActive:0,
				categoryList: {},
				twoCategoryList: [],
				threeCategoryList: [],
				brandList:[],
				product: {
					'skuName': null,
					'oneCategoryId':null,
					'twoCategoryId':null,
					'categoryId':null,
					'brandId':null
				},
				page: {
					'current': 1,
					'size': 10
				},
				goodsList: {},
				pagination: {},
				cart:{}
			}
		},
		methods: {
			getCategory() {
				request.get(MALL_GOODS_BASEURL + '/goods/category/list')
					.then(resp => {
						if(resp.code === 2000){
							let cts = JSON.stringify(resp.data)
							this.categoryList = JSON.parse(cts)
							this.getAllCategory()
						}
					})
			},
			
			getData() {
				this.goodsList = null
				this.product['current'] = this.page.current
				this.product['size'] = this.page.size
				request.get(MALL_GOODS_BASEURL + '/goods/product/list', {
						params: this.product
					})
					.then(resp => {
						if (resp.code === 2000) {
							let goods = JSON.stringify(resp.data.records)
							this.goodsList = JSON.parse(goods)
							this.pagination['current'] = resp.data.current
							this.pagination['pages'] = resp.data.pages
						}
					})
			},
			search() {
				this.page['current'] = 1
				this.getData()
			},
			handlePage(page) {
				if (page >= 1 && page <= this.pagination.pages) {
					this.page['current'] = page
					this.getData()
				}
			},
			getAllCategory() {
				this.twoCategoryList.length = 0
				for (let i = 0; i < this.categoryList.length; i++) {
					let two = this.categoryList[i].categoryList;
					for (let j = 0; j < two.length; j++) {
						this.twoCategoryList.push(two[j]);
					}
				}
			
				this.getThree(0)				
				this.getBrand()
			},
			getTwo(id,list) {
				this.twoCategoryList = JSON.parse(JSON.stringify(list))
				if(list){
					this.getThree(0)
					this.getBrandByOneCategoryId(id)
				}else{
					this.threeCategoryList.length = 0
					this.brandList.length = 0
				}
				if(id){
					this.active = id
					this.reset()
					this.product.oneCategoryId = id
					this.getData()
				}
			},
			getThree(id,list){
				this.threeCategoryList.length = 0
				if(id === 0){
					for(let i = 0; i < this.twoCategoryList.length;i++){
						let three = this.twoCategoryList[i].categoryList;
						for (let j = 0; j < three.length; j++) {
							this.threeCategoryList.push(three[j]);
						}
					} 
				}else if(list){
					this.threeCategoryList = JSON.parse(JSON.stringify(list))
					this.getBrandByTwoCategoryId(id)
				}
				if(id){
					this.reset()
					this.twoActive = id
					this.product.twoCategoryId = id
					this.page.current = 1
					this.page.size = 10
					this.getData()
				}
				
			},
			getBrand(){
				request.get(MALL_GOODS_BASEURL + '/goods/brand/list')
					.then(resp => {
						if(resp.code === 2000){
							let bd = JSON.stringify(resp.data)
							this.brandList = JSON.parse(bd)
						}
					})
			},
			getBrandByOneCategoryId(id){
				request.get(MALL_GOODS_BASEURL + '/goods/brand/category/1/' + id)
					.then(resp => {
						if(resp.code === 2000){
							let bd = JSON.stringify(resp.data)
							this.brandList = JSON.parse(bd)
						}
					})
			},
			getBrandByTwoCategoryId(id){
				request.get(MALL_GOODS_BASEURL + '/goods/brand/category/2/' + id)
					.then(resp => {
						if(resp.code === 2000){
							let bd = JSON.stringify(resp.data)
							this.brandList = JSON.parse(bd)
						}
					})
			},
			getBrandByThreeCategoryId(id){
				request.get(MALL_GOODS_BASEURL + '/goods/brand/category/3/' + id)
					.then(resp => {
						if(resp.code === 2000){
							let bd = JSON.stringify(resp.data)
							this.brandList = JSON.parse(bd)
						}
					})
			},
			
			getSkuInfoByCategory(id){
				this.threeActive = id
				this.getBrandByThreeCategoryId(id)
				this.product.categoryId = id
				this.page.current = 1
				this.page.size = 10
				this.getData()
			},
			getSkuInfoByBrand(id){
				this.brandActive = id
				this.product.brandId = id
				this.page.current = 1
				this.page.size = 10
				this.getData()
			},
			getBrandById(id){
				request.get(MALL_GOODS_BASEURL + '/goods/brand/category/' + id)
					.then(resp => {
						if(resp.code === 2000){
							let bd = JSON.stringify(resp.data)
							this.brandList = JSON.parse(bd)
						}
					})
			},
			cleanAll() {
				
				this.brandList.length = 0
				this.twoActive = 0
				this.threeActive = 0
				this.active = 0
				this.brandActive = 0
				this.reset()
				this.getAllCategory()
				this.getData()
			},
			reset(){
				this.page.current = 1
				this.page.size = 10
				this.product.brandId = null
				this.product.categoryId = null
				this.product.brandId = null
				this.product.oneCategoryId = null
				this.product.twoCategoryId = null
			},
			addCart(obj){
				if(sessionStorage.getItem("userInfo")){
					let json = sessionStorage.getItem("userInfo")
					let userInfo = JSON.parse(json)
					let cart = {}
					cart['userId'] = userInfo.userId
					cart['num'] = 1
					cart['skuId'] = obj.id
					cart['name'] = obj.skuName
					cart['price'] = obj.price
					cart['image'] = obj.skuDefaultImg
					request.post(MALL_CART_BASEURL + "/cart/save",cart)
					.then(resp => {
						if(resp.code == 2000){
							location.href = 'cart.html'
						}else if(resp.code == 3003 || resp.code == 2001){
							location.href = 'login.html'
						}
					})
					
				}else{
					location.href = 'login.html'
				}
				
			}
		},
		mounted() {
			
			this.getCategory()
			this.getData()
		}

	}).mount('#app')
</script>